<template>
  <basic-container>
    <avue-skeleton v-if="!flowTimelineLoading"  avatar :rows="4" :number="5"></avue-skeleton>
    <div class="timelineBlock">
      <el-steps direction="vertical" :active="handleCnt" >
        <el-step v-for="(timeline, index) in timelineData" :key="index"  :title="timeline.nodeName">
          <template slot="description" >
            <el-card  v-for="(processList, index1) in timeline.processList" :key="index1"  style="padding:5px 5px 20px 5px;">
              <div style="padding:10px 0px; color:#555555;">
                <el-row :gutter="10" type='flex' justify='start'>
                  <el-col style="width:100px">
                    <span style="font-size:14px; font-weight:bold;">处理意见：</span>
                  </el-col>
                  <el-col >
                      <span v-html="processList.processOpinion.replace(/\n/g,'<br>')"></span>
                  </el-col>
                </el-row>
              </div>
              <el-row>
                <el-col :span="5"><span style="font-weight:bold;">发起人：</span>{{processList.launchRealName}}({{processList.launchUserName}})</el-col>
                <el-col :span="5"><span style="font-weight:bold;">处理人：</span>{{processList.processRealName}}({{processList.processUserName}})</el-col>
                <el-col v-if="processList.processStatus != ''" :span="5"><span style="font-weight:bold;">处理结果：</span>{{processList.processStatus}}</el-col>
                <el-col v-if="processList.processStatus == ''"  :span="5"><span style="font-weight:bold;">处理结果：</span><span style="color:blue;">[待处理]</span></el-col>
                <el-col v-if="index == 0" :span="5"><span style="font-weight:bold;">发起时间：</span>{{processList.processBeginDateTime}}</el-col>
                <el-col v-else :span="5"><span style="font-weight:bold;">处理完成时间：</span>{{processList.processFinishDateTime}}</el-col>
                <el-col  v-if="processList.processStatus == '' || index == 0"  :span="4"><span style="font-weight:bold;">等待时长：</span>{{processList.nodeWaitDuration}}</el-col>
                <el-col  v-else  :span="4"><span style="font-weight:bold;">处理时长：</span>{{processList.nodeWaitDuration}}</el-col>
              </el-row>
              <el-collapse v-if='processList.attList.length > 0' accordion>
                <el-collapse-item>
                  <template slot="title">
                    <i class="header-icon el-icon-paperclip"></i>共<span style='color:red'>({{processList.attList.length}})</span>个附件
                    <span style='color:#e3e3e3;font-style:italic; padding-left:40%;'>点击展开</span>
                  </template>
                  <div>
                    <el-row style="padding:0px; margin:0px" v-for="file in processList.attList" :key="file">
                      <el-col style='cursor:pointer' :span="20">
                          <svg-icon v-if="file.fileType == 'xlsx' || file.fileType == 'xls'" iconClass="excel"/>
                          <svg-icon v-else-if="file.fileType == 'pptx' || file.fileType == 'ppt'" iconClass="ppt"/>
                          <svg-icon v-else-if="file.fileType == 'pdf'" iconClass="pdf"/>
                          <svg-icon v-else-if="file.fileType == 'docx' || file.fileType == 'doc'" iconClass="word"/>
                          <svg-icon v-else-if="file.fileType == 'txt'" iconClass="txt"/>
                          <el-image v-else-if="file.fileType == 'png' || file.fileType == 'bmp' || file.fileType == 'gif' || file.fileType == 'jpg' || file.fileType == 'jpeg'"
                            style="border-radius:5px; padding:5px 5px 0 0;width: 30px; height: 30px"
                            :src="'/'+file.filePath" 
                            :preview-src-list="['/'+file.filePath]">
                          </el-image>
                          <svg-icon v-else iconClass="unknown"/> 
                          <span  @click="openFile(file)"> {{file.fileName}} </span>
                      </el-col>
                    </el-row>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-card>
          </template>
        </el-step>
      </el-steps>
    </div>
  </basic-container>
</template>

<script>
import {getProcessFlowTimelineData} from '@/api/general/flow/generalFlowProcessRecordApi';
import {mapGetters} from 'vuex';
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {getToken} from '@/util/auth'
import {Base64} from 'js-base64';

export default {
  data() {
    return {
      flowTimelineLoading: false,
      timelineData: [],
      handleCnt: 0,
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: {},
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  computed: {
    ...mapGetters(['website','userInfo','permission'])
  },
  methods: { 
    /**
     * 加载列表数据
     * processId
     */
    loadTimelineData(processId) {
      //this.$console.log('from parent id ====',processId)
      const loading = this.$loading({
        text: 'Loading',
        spinner: 'el-icon-loading',
        fullscreen: 'false',
        background: 'rgb(255,255,255,0)'
      });
      this.reqParams =  {
        singleBody: {
          id: processId
        }
      } 
      this.commonData = reqCommonMsg(this.reqParams)
      getProcessFlowTimelineData(this.commonData).then(res => {
        let data = res.data.body.flowArea.flowExtData
        this.timelineData = data.nodes;
        this.handleCnt = data.handleCnt;
        this.flowTimelineLoading =  true;
        loading.close();
      }, error => {
        //this.$console.log(error);
        loading.close(); 
      });
    },

    /**
     * 动态表单数据处，加载列表数据
     * bizId
     */
    loadDynamicFormTimelineData(bizId) {
      //this.$console.log('bizId ====',bizId)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading'
      });
      this.reqParams =  {
        singleBody: {
          tenantId: localStorage.getItem('tenantId'),
          bizId: bizId
        }
      } 
      this.commonData = reqCommonMsg(this.reqParams)
      getProcessFlowTimelineData(this.commonData).then(res => {
        let data = res.data.body.flowArea.flowExtData
        this.timelineData = data.nodes;
        this.handleCnt = data.handleCnt;
        this.flowTimelineLoading =  true;
        loading.close();
      }, error => {
        //this.$console.log(error);
        loading.close(); 
      });
    },

    /**
     * 打开文件预览
     */   
    openFile(file){
      if(file.fileType == 'ppt' || file.fileType == 'pptx' || file.fileType == 'doc'  || file.fileType == 'docx'  || file.fileType == 'xls' || file.fileType == 'xlsx'  || file.fileType == 'pdf'){
      }
      else if(file.fileType == 'png' || file.fileType == 'jpeg' || file.fileType == 'jpg' || file.fileType == 'gif' || file.fileType == 'bmp') {
        this.$message({
          customClass:'zZindex',
          type: 'warning',
          message: '请直接点击小图片放大!',
        });
        return false;
      }
      let openUrl= 'id='+Base64.encode(file.fileId)+'&tenantId='+Base64.encode(this.userInfo.tenantId)+'&UID='+Base64.encode(this.userInfo.userId)+'&remote=no&UserSign=uploadFile&token='+getToken()+'&mode=view&history='+Base64.encode(file.filePath);
      window.open('/file/office/index?'+openUrl+'&sign='+this.$toolUtil.encodeMd5(openUrl), '_blank'); 
    }
  },
  created() {
       
  },
  mounted() {
  },
  watch: {
  }
};
</script>
<style>

</style>
